<!DOCTYPE html>

<html lang="zh-CN" xml:lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>填写订单信息</title>
<meta name="viewport" content="width=1226">

<link rel="icon" href="http://s01.mifile.cn/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="__PUBLIC__/Home/writeorder/base.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/writeorder/checkout.min.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/MyComponent/js/proviceSel.js"></script>
<script type="text/javascript" src="__PUBLIC__/Compoent/tweenlite.js"></script>
<script type="text/javascript" src="__PUBLIC__/Compoent/tween.js"></script>
!-- <script type="text/javascript" src="__PUBLIC__/Home/bootstrap/js/bootstrap.min.js"></script> -->
<style>
    
    #content{
        
        width: 400px;
        height: 400px;
        position:fixed;
        left: 240px;
        top: -3000px;
        border: 1px solid  #ff6700;
        opacity: 0;
        background-color: #ddd; 
        
        display:block;
        padding: 30px 20px 13px;
        background-color: #fff;
      /*transition: opacity 0.4s linear 0s;*/

    }

    table{
        position: absolute;
        /*background-color: yellow;*/
        width: 400px;

        margin: 0 auto;

        padding: 10px;


    }




    #sel{

        position: relative;
        /*background-color: red;*/
        width: 164px;
   



    }




    #content button{

        background-color: #ff6700;
        border: none;
        display: inline-block;
        padding: 10px 20px;
         color: white;

    }
    

    .b1{

        display: inline-block;

        background-color: #ff6700;

        margin-right: 10px;
        color: white;
        margin-top: 10px;
    }


    .b2{

        display: inline-block;

          background-color: #ff6700;

          margin-left: 10px;

          margin-top: 10px;
    }





    select{

          /*position: absolute;*/
          /*z-index: 9;*/
          width: 164px;
  
    }


    td input{

        border:1px solid #ccc;

        background-color: #fff;
        
        border-radius: 5%;

        width: 164px;

    }



    table{

         border-collapse:   separate;   border-spacing:   10px;
    }

    

    input:focus {
    transition: border  linear .2s, box-shadow linear .5s;
    -moz-transition: border linear .2s, -moz-box-shadow  linear .5s;
    -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
    outline: none;
    border-color: rgba(55,168,33,.75);
    box-shadow: 0 0 3px rgba(55,168,33,.5);
    -moz-box-shadow: 0 0 3px rgba(55,168,33,.5);
    -webkit-box-shadow: 0 0 3px rgba(55,168,33,3);
}



#btn{

    float: left;

    width: 30px;

    width: 30px;
}







</style>
</head>
<body>
<div class="page-main">
    <div class="container">
        <div class="checkout-box">
            <div class="section section-address">
                <div class="section-header clearfix">
                    <h3 class="title">收货地址</h3>
                    <div class="more">
                    </div>
                </div>
                <div class="section-body clearfix" id="J_addressList">
                <foreach name='data1' item='val'>
                    <div class="address-item J_addressItem " data-id = '<{$val.id}>'>
                        <dl>
                            <dt>
                                <span class="tag"><{$val.area}></span>
                                <em class="uname"><{$val.username}></em>
                            </dt>
                            <dd class="utel">
                                <{$val.phone}>                            
                            </dd>
                            <dd class="uaddress">
                                <{$val.address}><br>
                               <{$val.detail}>                            
                            </dd>
                        </dl>
                        <div class="actions">
                            <a href="" class="modify J_addressModify">修改</a>
                        </div>
                    </div>
                    </foreach>
                    <div class="address-item address-item-new" id="J_newAddress">
                        <i class="iconfont"></i>
                            添加新地址
                    </div>
                </div>
            </div>

            <div class="section section-options section-payment clearfix">
                <div class="section-header">
                    <h3 class="title">支付方式</h3>
                </div>
                <div class="section-body clearfix">
                    <ul class="J_optionList options ">
                        <li data-type="pay" class="J_option selected" data-value="1">
                            在线支付                            
                            <span>
                            （支持微信支付、支付宝、银联、财付通、小米钱包等）                   </span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="section section-options section-shipment clearfix">
                <div class="section-header">
                    <h3 class="title">配送方式</h3>
                </div>
                <div class="section-body clearfix">
                    <ul class="clearfix J_optionList options ">
                        <li data-type="shipment" class="J_option selected">
                            快递配送（免运费）                                                 
                        </li>
                    </ul>
                    <div class="service-self-tip" id="J_serviceSelfTip" style="display: none;"></div>
                </div>
            </div>

            <div class="section section-options section-time clearfix">
                <div class="section-header">
                    <h3 class="title">配送时间</h3>
                </div>
                <div class="section-body clearfix">
                    <ul class="J_optionList options options-list clearfix">
                        <!-- besttime start -->
                        <li data-type="time" class="J_option selected" data-value="1">
                            不限送货时间：<span>周一至周日</span>                        
                        </li>
                        <li data-type="time" class="J_option " data-value="2">
                            工作日送货：<span>周一至周五</span>                        
                        </li>
                        <li data-type="time" class="J_option " data-value="3">
                            双休日、假日送货：<span>周六至周日</span>                        
                        </li>
                    </ul>
                </div>
            </div>

            <div class="section section-options section-invoice clearfix">
                <div class="section-header">
                    <h3 class="title">发票</h3>
                </div>
                <div class="section-body clearfix">
                    <ul class="J_optionList options options-list  J_tabSwitch clearfix">
                        <li data-type="invoice" data-invoice-type="electron" class="J_option tab-active selected" data-value="4">
                            电子发票（非纸质）
                        </li>
                        <li class="J_option" id="J_paperInvoice">
                            普通发票（纸质）
                        </li>
                    </ul>

                    <div class="tab-container">
                        <div class="tab-content hide" style="display: none;"></div>
                        <div class="tab-content e-invoice-detail">
                            电子发票法律效力、基本用途及使用规定同纸质发票。不随商品寄送。
                            <a href="" id="J_showEinvoiceDetail">什么是电子发票 <i class="icon-qa">?</i></a>
                        </div>

                        <div class="tab-content hide paper-invoice-detail" style="display: none;">
                            <ul class="J_optionList options options-list J_tabSwitch clearfix">
                                <li data-type="invoice" data-invoice-type="personal" class="J_option" data-value="1">
                                    个人
                                </li>
                                <li data-type="invoice" data-invoice-type="company" class="J_option" data-value="2">
                                    单位
                                </li>
                            </ul>
                            <div class="tab-container">
                                <div class="tab-content paper-invoice-person">
                                    发票抬头：个人<br>
                                    发票内容：购买商品明细
                                </div>
                                <div class="tab-content hide paper-invoice-company">
                                    <div class="form-section">
                                        <label class="input-label" for="invoice_title">请输入发票抬头</label>
                                        <input class="input-text" type="text" id="invoice_title" name="invoice_title">
                                    </div>
                                    <p>发票内容：购买商品明细</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="section section-goods">
                <div class="section-header clearfix">
                    <h3 class="title">商品及优惠券</h3>
                    <div class="more">
                                                <a href="http://static.mi.com/cart/" data-stat-id="e2cb89a0d7ce0e0b" onclick="_msq.push([&#39;trackEvent&#39;, &#39;50d1f382fadafb8b-e2cb89a0d7ce0e0b&#39;, &#39;//static.mi.com/cart/&#39;, &#39;pcpid&#39;]);">返回购物车<i class="iconfont"></i></a>
                                            </div>
                </div>
                <div class="section-body">
                    <foreach name='data' item='val'>
                    <ul class="goods-list" id="J_goodsList">
                        <li class="clearfix">
                            <div class="col col-img">
                                <img src="__PUBLIC__/Uploads/<{$val.logo}>" width="30" height="30">
                            </div>
                            <div class="col col-name">
                                <a href="" target="_blank"><{$val.prodectsname}> <{$val.attr_value}></a>
                            </div>
                            <div class="col col-price">
                                <{$val.price}> X    <{$val.anum}>                
                            </div>
                            <div class="col col-status">
                                有货
                            </div>
                            <div class="col col-total">
                              <?php echo ($val['price'] * $val['anum'] ); ?>
                            </div>
                        </li>
                    </ul>
                    </foreach>
                </div>
            </div>

            <div class="section section-count clearfix">
              

                <div class="money-box" id="J_moneyBox">
                    <ul>
                        <li class="clearfix">
                            <label>商品件数：</label>
                            <span class="val">1件</span>
                        </li>
                        <li class="clearfix">
                            <label>金额合计：</label>
                            <span class="val"><{$totalprice}></span>
                        </li>
                        <li class="clearfix">
                            <label>活动优惠：</label>
                            <span class="val">-0元</span>
                        </li>
                        <li class="clearfix">
                            <label>优惠券抵扣：</label>
                            <span class="val"><i id="J_couponVal">-0</i>元</span>
                        </li>
                                                <li class="clearfix">
                            <label>运费：</label>
                            <span class="val"><i data-id="J_postageVal">0</i>元</span>
                        </li>
                        <li class="clearfix total-price">
                            <label>应付总额：</label>
                            <span class="val"><em data-id="J_totalPrice"><{$totalprice}></em>元</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /index.php/Home/Fillorder/insert.html  -->

            <div class="section-bar clearfix">
                <div class="fl">
                    <div class="seleced-address hide" id="J_confirmAddress">
                    </div>
                    <div class="big-pro-tip hide J_confirmBigProTip"></div>
                </div>
                <div class="fr">
                    <a href="" class="btn btn-primary " id="J_checkoutToPay">去结算</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
 
</html>
<div id="content">
    
        <center>
            <form action=""  enctype="multipart/form-data" method="post" name="fileinfo">
        <table>
            <tr>
                <td>姓名：</td><td><input type="text" name="userName"></td>
            </tr>
            <tr>
                <td>手机号：</td><td><input type="text" name="phone"></td>
            </tr>
            
            <tr style="height:200px;vertical-align: center;">
                <td>地址选择：</td><td><div id="sel" ></td>
            </tr>
            <tr>
            <td>详细地址：</td><td><input type="text" name="detail"></td>
            </tr>
            <tr>
            <td>地址标签：</td><td><input type="text" name="area"></td>
            </tr>
        
            <tr><td></td><td><div class="b1"><button  class = 'button' id="cancel">取消</button></div><div class="b2"><button  class = 'button' id="sub">提交</button></div></td></tr>
        </table>
                    
    </form>
        </center>   
</div>
<script>
    
    function show(){

         var box = document.getElementById("content");

         var iWidth     = box.offsetHeight; //弹出窗口的宽度;
         var iHeight    = box.offsetWidth;//弹出窗口的高度;

         var iTop2 = (window.screen.availHeight - 20 - iHeight) / 2;
         var iLeft2 = (window.screen.availWidth - 10 - iWidth) / 2;
            var obj1 = 
            {
                top:iTop2,
                left:iLeft2,
                opacity:100,
                ease:Tween.Bounce.easeOut,
               
            };
            
            TweenLite(box, 3, obj1);
    }


    function hidden(){

          var box = document.getElementById("content");
            var obj2 = 
            {
                top:-2000,
                opacity:0,
                ease:Tween.Back.easeOut,
       
            };


             TweenLite(box, 3, obj2);

    }
function sendForm() {

  var oData = new FormData(document.forms.namedItem("fileinfo"));
 
  oData.append("CustomField", "This is some extra data");
 
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "<{:U('Home/Address/insert')}>", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
        
        if (oReq.responseText ==1) {
                hidden();
             alert('添加成功');
//刷新页面
             window.location.reload();

             



        }else if(oReq.responseText ==0){

             alert('添加失败，稍后再试');
        }else if(oReq.responseText ==2){
            alert('请完善您的信息');
        }
    } else {
        alert('网络错误，稍后再试');
    }
  };
 
  oReq.send(oData);
}


    $(function(){

        proviceSel('sel',"<{:U('Home/Address/provice')}>");
        
        $('#J_newAddress').click(function(){

        // $("J_addressItem").slideDown("slow");
        show();




        var MyForm = $('#Myfrom')[0];

        var oMyForm = new FormData(MyForm);
        
        $('#sub').click(function(){


            sendForm();


        return false;
            })




        $('#cancel').click(function(){

            hidden();

        });



        return false;
  

        
    })

        var id = $('.address-item').first().data('id')

        $('.address-item ').first().css('border','1px solid #ff6700');

        $('.address-item').click(function(){

            $('.address-item').css('border','1px solid #ccc');
            $(this).css('border','1px solid #ff6700');

            id = $(this).data('id');

            // alert(id)

        var orderUrl = "/index.php/Home/Fillorder/insert/id/"+id+".html";
            
        $('#J_checkoutToPay').attr('href',orderUrl);


        })

        var orderUrl = "/index.php/Home/Fillorder/insert/id/"+id+".html";
            
        $('#J_checkoutToPay').attr('href',orderUrl);
       

        if (id==0)
         {

            $('#J_checkoutToPay').attr('href','#');
            alert('尚未选择地址!');
        }


   



    


          

      


              
           


        




})

</script>
